<template>
    <titleComponents :title="title" />
    <el-row :gutter="24" style="height: auto;width: 100%;">
        <el-col :span="8">
            <articleHomeShowComponents2Class :article="history" :photo="articles" />
            <div class="more">
                <router-link :to="{ name: 'history' }" class="more">更多></router-link>
            </div>
        </el-col>
        <el-col :span="16" style="padding: 0px;">
            <photoHomeShowComponents2Class :article="articles" />
        </el-col>
    </el-row>
</template>

<script>
import titleComponents from './homeComponents/titleComponents.vue';
import articleHomeShowComponents2Class from './homeComponents/articleHomeShowComponents2Class.vue';
import photoHomeShowComponents2Class from './homeComponents/photoHomeShowComponents2Class.vue';
import $ from 'jquery';
import { ref } from 'vue';
export default {
    name: "historyComponents",
    components: {
        titleComponents,
        articleHomeShowComponents2Class,
        photoHomeShowComponents2Class,
    },
    setup() {
        let title = ref("红色历史");
        let history = ref([]);
        let articles = ref([]);
        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/articleGet/getArticleByTag/",
                data: {
                    tag: "红色历史",
                    page: 1,
                    sizes: 5,
                },
                success(resp) {
                    history.value = resp.article;
                }
            })
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/homeArticle/getShowHomeByTag/",
                data: {
                    tag: "红色历史",
                },
                success(resp) {
                    articles.value = resp.article;
                }
            })
        }
        getInfo();

        return {
            title,
            history,
            articles,
        }
    }
}

</script>

<style scoped>
.more {
    float: right;
    color: rgb(102, 102, 102);
    text-decoration: none;
}

.more :visited {
    text-decoration: none;
}

.more :hover {
    color: red;
}
</style>